<toaster-container></toaster-container>
<div class="row">
  <div class="col-md-2">
    <select *ngIf="topics" [(ngModel)]="selectedTopic" (change)="getInsights()" class="form-control">
      <option [ngValue]="undefined">Topic</option>
      <option *ngFor="let topic of topics | enumToArray" [ngValue]="topic.id">{{topic.name}}</option>
    </select>
  </div>
  <div class="col-md-2">
    <select *ngIf="sectors" [(ngModel)]="selectedSector" (change)="getInsights()" class="form-control">
      <option [ngValue]="undefined">Sector</option>
      <option *ngFor="let sector of sectors | enumToArray" [ngValue]="sector.id">{{sector.name}}</option>
    </select>
  </div>
  <div class="col-md-2">
    <button class="btn btn-transparent" [routerLink]="[false, 'new']">
      Add Insight
    </button>
  </div>
  <div class="col-md-6" style="text-align:right">
      <button class="btn btn-primary-dark" [disabled]="selectedInsights.length == 0" (click)="deleteInsights()">
        Delete Insights
        <span *ngIf="selectedInsights.length > 0">({{selectedInsights.length}})</span>
      </button>
      <button class="btn btn-primary-dark ml-1" [disabled]="selectedInsights.length == 0" (click)="publishInsights()">
        Publish Insights
        <span *ngIf="selectedInsights.length > 0">({{selectedInsights.length}})</span>
      </button>
  </div>
</div>
<hr>

<sustainalytics-table #insightsTable [columns]="columns" [source]="insights" [filter]="filter" [elementCount]="count" [paginationPositionDisplay]="paginationPosition"
  [displayTitle]="false" (changed)="tableOptionsChanged($event)" (buttonClicked)="onInsightSelectionChanged($event)">
</sustainalytics-table>